<!DOCTYPE html>
<html>
<head>
    <title>Constructor</title>
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

    <style>
        .letter-container {
            text-align: center;
        }

        .letter-block {
            border: solid 1px;
            width: 32px;
            height: 32px;
            display: inline-block;
            padding: 9px;
            line-height: 32px;
            font-size: 24px;
        }

        .buttons-container {
            text-align: right;
        }

        .placeholder {
            background-color: #dddddd;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span3">

        </div>
        <div class="span6">
            <div class="hero-unit letter-container">
                <h2>translation</h2>
                <hr />
                <div class="well-large">
                    <div class="well-small letter-block placeholder"></div>
                    <div class="well-small letter-block placeholder"></div>
                    <div class="well-small letter-block placeholder"></div>
                </div>
                <div class="well-large">
                    <a class="btn btn-danger letter-block">a</a>
                    <a class="btn btn-primary letter-block">a</a>
                    <a class="btn btn-success letter-block">a</a>
                </div>
                <hr />
                <p class="buttons-container">
                    <a class="btn btn-primary">I don't now</a>
                </p>
            </div>

        </div>
    </div>


</div>
</body>
</html>